<template>
  <div class="counter-container" id="counter">
    <!-- 数量 -1 按钮 -->
    <button type="button" class="btn btn-light btn-sm" @click="onSubClick">
      -
    </button>
    <!-- 输入框 -->
    <input
      type="number"
      class="form-control form-control-sm ipt-num"
      v-model.number.lazy="number"
    />

    <!-- 数量 +1 按钮 -->
    <button type="button" class="btn btn-light btn-sm" @click="onAddClick">
      +
    </button>
  </div>
</template>

<script>
export default {
  name: 'EsCounter',
  props: {
    // 初始数量值【只读数据】
    num: {
      type: Number,
      default: 0,
    },
    min: {
      type: Number,
      // 表示不指定最小值
      default: NaN,
    },
    id: {
      type: Number,
    },
  },

  data() {
    return {
      // 内部状态值【可读可写的数据】
      // 通过 this 可以访问到 props 中的初始值
      number: this.num,
    };
  },
  methods: {
    // -1 按钮的事件处理函数
    onSubClick() {
      // min 的值存在，且 number - 1 之后小于 min
      if (!isNaN(this.min) && this.number - 1 < this.min) {
        return;
      } else {
        this.number -= 1;
      }
    },
    // +1 按钮的事件处理函数
    onAddClick() {
      this.number += 1;
    },
  },
  watch: {
    number(newValue) {
      const parseResult = parseInt(newValue);
      //如果不为数字
      if (isNaN(parseResult) || parseResult < this.min) {
        return (this.number = 1);
      }
      this.number = parseResult;
      // 触发自定义事件
      this.$emit('numChange', { id: this.id, val: this.number });
    },
  },
};
</script>

<style lang="css" scoped>
.counter-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
#input {
  box-sizing: border-box;
  width: 52px;
  padding-left: 8px;
  height: 25px;
  text-align: center;
}

#button1,
#button2 {
  width: 25px;
  height: 25px;
}

input {
  width: 60px;
}
</style>
